<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            margin: 0 auto;
            border: 1px solid red;
            background-color: rgb(244, 244, 244);

        }

        .wrapper .top {
            width: 980px;

            padding: 10px;
        }

        .wrapper button {
            width: 20px;
            float: right;
            margin-left: 5px;
        }

        /* 200 li */
        .wrapper .content {
            width: 1000px;
            overflow: hidden;
        }


        .wrapper .content div {
            float: left;
        }

        .wrapper .content .box1 {
            width: 200px;
            height: 200px;
            background-color: skyblue;

        }

        .wrapper .content .move {
            float: left;
            width: 800px;
            position: absolute;
            overflow: hidden;
        }

        .wrapper .content .move ul {
            width: 4200px;
            /* margin-left: -500px; */
        }

        .wrapper .content .move ul li {
            float: left;
            width: 200px;
            height: 200px;
            background-color: white;
            margin-left: 10px;
        }
    </style>
    <script src="./js/jquery.js"></script>
    <script>
        $(function () {
          
          var index = 0
          $('button').eq(0).on('click', function () {
              index++
              if(index>4){
                 $('button').eq(0).off('click')
              }else{
                     $('ul').animate({
                  marginLeft: -(index * 800)-(index*40)
              })
              }
          })

          $('button').eq(1).on('click', function () {
             index--
             console.log(index)
             
              if(index<0){
                  $('button').eq(1).off('click')
              }else{
                  $('ul').animate({
                    marginLeft: -(index * 800)-(index*40)
              }) 
              }
          })
      })
    </script>
</head>

<body>
    <div class="wrapper">
        <div class="top">
            <span>小米闪购</span>
            <button class="btn1" >&gt;</button>
            <button class="btn2" >&lt;</button>
        </div>

        <div class="content">
            <div class="box1">
                广告位招租
            </div>
            <div class="max">
                <div class="move">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                    </ul>
                </div>
            </div>

        </div>

    </div>
</body>

</html>